<template>
  <div class="ChatContent" ref="ChatContentRef">
    <div class="ChatItemList" v-if="Object.prototype.toString.call(chatMap) === '[object Map]'">
      <template v-for="(value,, index) in chatMap.get(currentChat)?.messages">
        <div :id="value.id!.toString()" ref="ChatItems">
          <ChatItem :beSelected="beSelectChat?.includes(value.id as string)!" :key="value.id" :value="value"
            :index="index"
            v-if="(chatSettings['base'].template['systemHide'].value && value.role === 'system') || value.role !== 'system'" />
        </div>
      </template>
    </div>
  </div>
</template>

<script setup lang='ts'>
const { beSelectChat } = defineProps({
  beSelectChat: {
    type: Array,
    default: () => []
  }
})
const { currentChat, chatMap } = storeToRefs(chatStore())
const { chatSettings } = storeToRefs(chatSettingStore())
const ChatItems = ref<HTMLElement[]>()
const ChatContentRef = ref<HTMLElement>()
defineExpose({
  ChatItems,
  ChatContent: ChatContentRef
})
</script>

<style lang="scss">
.ChatContent {
  flex: 1;
  display: flex;
  width: 100%;
  flex-direction: column;
  overflow: auto;
  align-items: center;
  position: relative;
}

.ChatItemList {
  width: 90%;
  padding-bottom: 10px;
}

@media screen and (min-width: 800px) {
  .ChatItemList {
    width: 60%;
  }
}

.ChatContent::-webkit-scrollbar {
  width: 0;
}
</style>